<template>
  <div class="view">
    <el-row class="handle-box" :model="filters">
      <el-col :span="10">
        <el-button class="jianbianbule" type="primary" icon="el-icon-plus" @click="handleAdd">{{
          $t("platformcon.platform")
        }}</el-button>
      </el-col>
      <el-col :span="14" style="text-align: right;">
        <span>{{ $t("platformcon.platformName") }}：</span>
        <el-input
          v-model="filters.PlatformName"
          @keyup.native.enter="search"
          :placeholder="$t('public.text')"
          clearable
        ></el-input>

        <span>{{ $t("platformcon.platformType") }}：</span>
        <el-select
          v-model="filters.PlatformType"
          @change="search"
          clearable
          filterable
          :placeholder="$t('public.select')"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>

        <el-button
          class="seacthsbtn"
          type="primary"
          id="btn"
          @click="search"
          icon="el-icon-search"
          >{{ $t("public.search") }}</el-button
        >
      </el-col>
    </el-row>
    <div class="tablebox">
      <template>
        <el-table :data="tables" size="mini" stripe class="tablefisbox">
          <el-table-column type="index" :label="$t('public.number')" width="80">
          </el-table-column>
          <el-table-column
            prop="platformName"
            :label="$t('platformcon.platformName')"
          >
          </el-table-column>
          <el-table-column
            prop="platformType"
            :label="$t('platformcon.platformType')"
          >
          </el-table-column>
          <el-table-column prop="area" label="所属区域"> </el-table-column>
          <el-table-column prop="block" label="区块"> </el-table-column>
          <el-table-column prop="rigType" label="钻机类型"> </el-table-column>
          <el-table-column
            prop="loggingSysType"
            label="录井系统类型"
          ></el-table-column>
          <el-table-column prop="remark" :label="$t('public.remark')">
          </el-table-column>
          <el-table-column prop="createUser" :label="$t('public.createUser')">
          </el-table-column>
          <el-table-column
            prop="createTime"
            :formatter="carTimeFilter"
            :label="$t('public.createTime')"
            width="180"
          >
          </el-table-column>
          <el-table-column :label="$t('public.operation')" width="200">
            <template slot-scope="scope">
              <el-button
                type="warning"
                icon="el-icon-edit"
                round
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ $t("public.edit") }}</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                round
                size="mini"
                @click="handleDel(scope.$index, scope.row)"
                >{{ $t("public.del") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--工具条-->
      <el-col class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageSize"
          :total="total"
        >
        </el-pagination>
      </el-col>

      <!--编辑界面-->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        width="700px"
      >
        <el-form :model="editForm" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('platformcon.platformName')"
                prop="platformName"
              >
                <el-input
                  v-model="editForm.platformName"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="$t('platformcon.platformType')"
                prop="platformType"
              >
                <el-select
                  v-model="editForm.platformType"
                  clearable
                  filterable
                  :placeholder="$t('public.select')"
                >
                  <el-option label="半潜式" value="半潜式"></el-option>
                  <el-option label="自升式" value="自升式"></el-option>
                  <el-option label="导管式" value="导管式"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属区域" prop="area">
                <el-select
                  v-model="editForm.area"
                  clearable
                  @change="blockSelect($event)"
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in areadata"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区块" prop="block">
                <el-select
                  v-model="editForm.block"
                  clearable
                  :placeholder="$t('public.select')"
                >
                  <el-option
                    v-for="item in blockdata"
                    :key="item.blockName"
                    :label="item.blockName"
                    :value="item.blockName"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="钻机类型" prop="rigType">
                <el-select
                  v-model="editForm.rigType"
                  clearable
                  filterable
                  :placeholder="$t('public.select')"
                >
                  <el-option label="钻机平台" value="钻机平台"></el-option>
                  <el-option label="模块钻机" value="模块钻机"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="录井系统类型" prop="loggingSysType">
                <el-select
                  v-model="editForm.loggingSysType"
                  clearable
                  filterable
                  :placeholder="$t('public.select')"
                >
                  <el-option label="ALS3" value="ALS3"></el-option>
                  <el-option label="GN4" value="GN4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('public.remark')" prop="remark">
                <el-input
                  type="textarea"
                  v-model="editForm.remark"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="dialogFormVisible = false" type="success">{{
            $t("public.cancelbtn")
          }}</el-button>
          <el-button
            v-if="dialogStatus == 'create'"
            type="primary"
            @click="createData"
            >{{ $t("public.savebtn") }}</el-button
          >
          <el-button v-else type="primary" @click="updateData">{{
            $t("public.changebtn")
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogStatus: "", //编辑框界面切换
      textMap: {
        //添加与编辑界面
        update: this.$t("public.edit"),
        create: this.$t("public.create"),
      },
      dialogFormVisible: false, //弹窗
      filters: {
        PlatformName: "",
        PlatformType: "",
      },
      tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      //是否必填项
      editFormRules: {
        platformName: [
          { required: true, message: "请输入平台名称", trigger: "blur" },
        ],
        platformType: [
          { required: true, message: "请选择平台类型", trigger: "blur" },
        ],
        area: [{ required: true, message: "请选择区域", trigger: "blur" }],
        block: [{ required: true, message: "请选择区块", trigger: "blur" }],
        rigType: [
          { required: true, message: "请选择钻机类型", trigger: "blur" },
        ],
        loggingSysType: [
          { required: true, message: "请选择录井系统类型", trigger: "blur" },
        ],
      },
      //编辑界面数据
      editForm: {
        platformName: "",
        platformType: "",
        area: "",
        block: "",
        rigType: "",
        loggingSysType: "",
        remark: "",
      },
      options: [
        {
          value: "1",
          label: "自升式",
        },
        {
          value: "2",
          label: "半潜式",
        },
        {
          value: "3",
          label: "导管式",
        },
      ],
      //区域数据
      areadata: [],
      //区块数据
      blockdata: [],
    };
  },
  watch: {
    "filters.PlatformName"(val) {
      if (val.trim() === "") {
        this.getPlatform();
      }
    },
  },
  mounted() {
    this.areaSelect();
    this.getPlatform();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getPlatform();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getPlatform();
    },
    //编辑参数
    handleEdit(index, row) {
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.blockSelect(row.areaId);
      this.editForm = {
        pid: row.pid,
        platformName: row.platformName,
        platformType: row.platformType,
        area: row.areaId,
        block: row.block,
        rigType: row.rigType,
        loggingSysType: row.loggingSysType,
        remark: row.remark,
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //新增参数
    handleAdd() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.editForm = {
        platformName: "",
        platformType: "",
        area: "",
        block: "",
        rigType: "",
        loggingSysType: "",
        remark: "",
        createUser: JSON.parse(this.$store.state.userInfo).uid,
      };
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getPlatform();
    },
    //获取区域名称数据
    async areaSelect() {
      let option = await this.$api.set.areaSelect();
      this.areadata = option.data;
    },
    //获取曲线参数下拉列表
    async blockSelect(prov) {
      let param = {
        areaid: prov,
      };

      let option = await this.$api.set.blockSelect(param);
      this.blockdata = option.data;
    },

    //获取平台数据
    async getPlatform() {
      try {
        let params = {
          PlatformName: this.filters.PlatformName,
          PlatformType: this.filters.PlatformType,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.set.getPlatform(params);
        this.total = res.count;
        this.tables = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    //添加平台
    createData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.set.addPlatform(params);
          if (res.code == 200) {
            this.$message({
              message: this.$t("public.addsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false; //关闭弹窗
            this.getPlatform(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //修改平台 调用方法
    updateData() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          let params = Object.assign({}, this.editForm);
          let res = await this.$api.set.editPlatform(params);
          if (res.code == 200) {
            this.$message({
              message: this.$t("public.editsuccess"),
              type: "success",
            });
            this.$refs["editForm"].resetFields(); //清空表单
            this.dialogFormVisible = false;
            this.getPlatform(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除平台 调用方法
    handleDel(index, row) {
      // 二次确认删除
      this.$confirm(
        this.$t("public.confirmcontent"),
        this.$t("public.confirmtitle"),
        {
          type: "warning",
        }
      )
        .then(async () => {
          let params = {
            id: row.pid,
            usid: JSON.parse(this.$store.state.userInfo).uid,
          };
          let res = await this.$api.set.removePlatform(params);
          if (res.code == 200) {
            this.$message.success(this.$t("public.confirmtips1"));
            this.getPlatform(); //刷新数据
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {});
    },
    //时间格式化
    carTimeFilter(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        return this.$moment(daterc).format("YYYY-MM-DD HH:mm:ss");
      }
    },
  },
};
</script>